<template>
  <div style="display: flex;">
    <el-button type="primary" plain @click="add" :icon="addIcon">
      添加角色
    </el-button>
    <el-form-item style="margin-left: 49vw;" label="角色搜索：">
      <div style="display: flex;">
        <el-input v-model="findparams.keyword" @input="getTableData"></el-input>
      </div>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;" :border="parentBorder">
    <el-table-column prop="id" label="角色编号" width="auto" />
    <el-table-column prop="name" label="角色名称" width="auto" />
    <el-table-column prop="description" label="描述" width="auto"></el-table-column>
    <el-table-column width="auto" label="修改">
      <template #default="scoped">
        <el-button plain type="primary" @click="update(scoped.row.id)">修改</el-button>
      </template>
    </el-table-column>
    <el-table-column label="权限管理" width="250">
      <template #default="scoped">
        <el-button plain type="primary" @click="roleUser(scoped.row.id)">绑定角色</el-button>
        <el-button plain type="primary" @click="rolePermission(scoped.row.id)">绑定权限</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
  <el-dialog 
      :model-value="dialog.show"
      :title="dialog.title"
      width="700px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      destroy-on-close>
     <Add
      @getTableData="getTableData"
      v-model:show="dialog.show"
      :id="dialog.id"
     />
  </el-dialog>
  <!-- 绑定用户 -->
   <el-dialog
     :model-value="roleUserDialog.show"
     title="绑定用户"
     width="600px"
     :before-close="handleClose"
     :close-on-click-modal="false"
     destroy-on-close>
      <User
        :roleId="roleUserDialog.roleId"
        v-model:show="roleUserDialog.show"
        >
      </User>
   </el-dialog>
  <!-- 绑定权限 -->
   <el-dialog
     :model-value="rolePermissionDialog.show"
     title="绑定权限"
     width="300px"
     :before-close="handleClose"
     :close-on-click-modal="false"
     destroy-on-close>
      <Permission
      v-if="rolePermissionDialog.show"
      :roleId="rolePermissionDialog.roleId"
      v-model:show="rolePermissionDialog.show"
      ></Permission>
   </el-dialog>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import Add from './add.vue'
import { ElMessageBox } from 'element-plus'
import path from './path'
import addIcon from '@/components/icons/add.vue'
import User from './user.vue'
import Permission from './permission.vue'
let tableData = ref({})
// 控制添加消息框
const dialog = reactive({
  show:false,
  title:'',
  id:null,
});
// 控制绑定角色消息框
const roleUserDialog = reactive({
  show:false,
  roleId:null
})
// 控制绑定权限消息框
const rolePermissionDialog = reactive({
  show:false,
  roleId:null
})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 14
})
const findparams = reactive({
  keyword:null
})
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams != null){
    params.keyword = findparams.keyword
  }
  get(findparams.keyword ? path.find : path.list,params,content => {
    tableData.value = content
  })
}
function add(){
  dialog.flag = false
  dialog.title="添加角色"
  dialog.id = null
  dialog.show = true
}
function update(id){
  dialog.flag = true
  dialog.title="修改角色"
  dialog.id = id
  dialog.show = true
}
function roleUser(id){
  roleUserDialog.show = true
  roleUserDialog.roleId = id
}
function rolePermission(id){
  rolePermissionDialog.show = true
  rolePermissionDialog.roleId = id
}
// 表单关闭事件
function handleClose(){
    // 将表单隐藏
    dialog.show = false
    roleUserDialog.show = false
    rolePermissionDialog.show = false
} 
</script>

<style scoped lang='scss'>
</style>